import React, { useEffect, useState } from 'react'
import LogTimeline from '../LogTimeline';
import { Collapse, List, Loading } from '@alifd/next';
import { useStore } from '@/hooks';
import { observer } from 'mobx-react-lite';
import { t } from '@lingui/macro';

const Panel = Collapse.Panel;

const OrderLogs = (props) => {
  const { orderId } = props;
  const { rsTaskStore: store } = useStore();
  const [logs, setLogs] = useState({ orderLogs: [], taskLogs: [] });

  useEffect(() => {
    (async () => {
      const order = await store.getOrderInfo(orderId);
      const data = await store.getOrderLogs(order);
      setLogs(data);
    })();
  }, []);

  const { orderLogs, taskLogs } = logs;

  const collapeItems = taskLogs.map((cur, index) => {
    const { taskId, taskLog, companyName, tickets } = cur;
    return (
      <Panel
        title={`${taskId}${companyName}`}
        key={`${index}`}
        style={{ border: '1px solid #f0f0f0' }}
      >
        <div style={{ display: 'flex', flexDirection: 'row' }}>
          <LogTimeline
            width="70%"
            title="任务日志"
            dataSource={taskLog}
          />
          <div style={{ width: '30%' }}>
            <List
              header={t`涉及车票`}
              size="small"
              style={{ textAlign: 'center' }}
              dataSource={tickets}
              renderItem={(item) => (
                <List.Item key={item.ticketCode} style={{ textAlign: 'center' }}>{item.ticketCode}</List.Item>
              )}
            />
          </div>
        </div>
      </Panel>
    );
  });

  return (
    <Loading visible={toJS(store?.loadingOrderLogs)} style={{ width: '100%', height: '100%' }}>
      <div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
        <Collapse
          style={{ width: '60%' }}
          defaultExpandedKeys={['0']}
        >
          {collapeItems}
        </Collapse>
        <LogTimeline
          title="订单日志"
          width="40%"
          dataSource={orderLogs}
        />
      </div>
    </Loading>
  );
};

export default observer(OrderLogs);
